<template>
  <div class="table-box">
    <div class="content-box" v-if="isShow">
      <ProTable row-key="orderId" ref="proTable" :columns="columns" :requestApi="getTableList">
        <!-- 菜单操作 -->
        <template #operation="scope">
          <div class="flex justify-center">
            <el-button type="primary" link :icon="EditPen">详情</el-button>
          </div>
        </template>
        <!-- 所属校区 -->
        <template #schoolList="scope">
          {{ scope.row.schoolInfo.schoolName }}
        </template>
        <!-- 所属课程 -->
        <template #courseList="scope">
          {{ scope.row.courseName }}
        </template>
      </ProTable>
    </div>
  </div>
</template>

<script setup lang="ts" name="eduadmin">
import { ref, onMounted } from "vue";
import { GetCourseList, GetOrderList } from '@/api/modules/service'
import { EditPen } from "@element-plus/icons-vue";
import { ColumnProps } from "@/components/ProTable/interface";
import ProTable from '@/components/ProTable/index.vue'
import { GetSchoolList } from "@/api/modules/commom";

const isShow = ref<boolean>(true)
const proTable = ref()
const filterCourseList = ref<any[]>([])
// 表格配置项
const columns: ColumnProps[] = [
  { type: 'selection', fixed: 'left', width: 70 },
  { prop: 'orderId', label: 'ID', width: 100,
    search: {
      el: 'input',
      key: 'orderId',
    }
  },
  { prop: "schoolList", label: '所属校区', width: 125,
    search: {
      el: 'select',
      key: 'schoolId',
      props: { filterable: true }
    },
    fieldNames: {
      label: 'schoolName',
      value: 'schoolId'
    },
    enum: GetSchoolList
  },
  { prop: 'courseList', label: '所属课程', width: 125,
    search: {
      el: 'select',
      key: 'courseId',
      props: { filterable: true }
    },
    fieldNames: {
      label: 'courseName',
      value: 'courseId'
    },
    enum: filterCourseList.value
  },
  { prop: 'studentName', label: '姓名' },
  { prop: 'userPhone', label: '手机号' },
  { prop: 'payAmount', label: '金额' },
  { prop: 'courseOutlineCount', label: '总课次' },
  { prop: 'userRemark', label: '订单备注' },
  { prop: 'createdAt', label: '下单时间' },
  { prop: 'operation', label: '操作', width: 220, fixed: 'right' }
];
async function getTableList(params: any) {
  return GetOrderList(params);
}
// 获取课程列表
async function _getCourseList() {
  const { data }: any = await GetCourseList({ pageSize: 10000 })
  filterCourseList.value.length = 0;
  if (data && data.list.length > 0) {
    filterCourseList.value.push(...data.list)
  }
}
onMounted(() => {
  _getCourseList()
})
</script>
<style lang='scss' scoped>
.sale-flex {
  display: flex;
  align-items: center;
  justify-content: center;

  span {
    margin-right: 10px;
  }

  :deep(.el-switch) {
    &.is-disabled {
      opacity: 1;

      .el-switch__core {
        cursor: pointer !important;
      }
    }
  }
}
.el-dropdown-link {
  display: flex;
  align-items: center;
}
</style>